<%@ page import="com.cdvtc.flower.dao.ProductsDao" %>
<%@ page import="com.cdvtc.flower.model.Products" %>
<%@ page import="com.cdvtc.flower.dao.impl.ProductsDaoImpl" %>
<%@ page import="java.util.List" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!doctype html>
<html>
<jsp:include page="commons/header.jsp"></jsp:include>
<body>
<div class="tz_content">
  <jsp:include page="commons/leftList.jsp"></jsp:include>
  <div class="t_right">
    <jsp:include page="commons/location.jsp"></jsp:include>
    <div class="r_message">
      <div id="controls" class="controls-container">
        <!-- 新增商品的按钮 -->
        <td><button type="button" class="add-btn"  onclick="navigateToAddPage();" >添加商品</button></td>
      <table>
        <tr>
          <th>商品编号</th>
          <th>名称</th>
          <th>种类</th>
          <th>图片</th>
          <th>原价</th>
          <th>售价</th>
          <th>简述</th>
          <th>商家编号</th>
          <th>是否上架</th>
          <th colspan="2">操作</th> <!-- 合并两列 -->
        </tr>
        <%
          ProductsDao productsDao = new ProductsDaoImpl();
          List<Products> products;
         products= productsDao.getAllProducts();
          pageContext.setAttribute("products", products);
        %>
        <c:forEach var="product" items="${products}" >
          <tr>
            <td>${product.product_id}</td>
            <td>${product.product_name}</td>
            <td>${product.category_id}</td>
            <td>${product.image}</td>
            <td>${product.original_price}</td>
            <td>${product.sale_price}</td>
            <td>${product.description}</td>
            <td>${product.merchant_id}</td>
            <td>${product.sold}</td>
            <!-- 在每个商品行后添加编辑链接 -->
            <td><a href="ProductModify.jsp?product_id=${product.product_id}">编辑</a></td>

            <!-- 在每个商品行后添加删除按钮 -->
            <td><button type="button" class="delete-btn" data-product-id="${product.product_id}">删除</button></td>
          </tr>
          </tr>
        </c:forEach>
      </table>
      </div>
      <div class="clear"></div>
    </div>
  </div>
</div>
</body>
</html>
<style>
  .controls-container {
    text-align: center; /* 水平居中 */
    margin-bottom: 10px; /* 根据需要调整与表格之间的间距 */
  }

</style>
<script src="js/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('.delete-btn').click(function() {
      var productId = $(this).data('product-id'); // 获取data-product-id属性的值
      $.ajax({
        url: 'DeleteProductServlet?id=' + encodeURIComponent(productId), // Servlet的URL，不直接包含参数
        type: 'DELETE', // HTTP DELETE方法
        data: { id: productId }, // 发送的数据，这里是一个名为id的参数
        // 如果您的后端支持从DELETE请求的body中读取数据，上面的data选项是合适的
        // 否则，您可能需要将其附加到URL上，如下所示（注释掉上面的data选项）
        // url: 'DeleteProductServlet?id=' + encodeURIComponent(productId),
        success: function(response) {
          alert('商品已成功删除！');
          location.reload(); // 重新加载整个页面
        },
        error: function(xhr, status, error) {
          // 请求失败后的处理逻辑
          alert('删除商品时发生错误: ' + error);
          // 您可以进一步分析xhr对象以获取更详细的错误信息
          // console.log(xhr.responseText);
        }
      });
    });
  });

  function navigateToAddPage() {
    window.location.href = 'ProductAdd.jsp';
  }
</script>